<!-- 订单详情页面 -->
<template>
	<view>
		<view class="refund-detail">
			<!-- 审核状态 -->
			<view class="status">
				<text>{{applyStatusList[refundInfo.apply_status]}}</text>
			</view>
			<!-- 商品信息 -->
			<view class="refund-info">
				<view class="info-top">
					<u-icon name="shopping-cart" color="#2ba4f7" size="32" class="icon"></u-icon>
					<text>商品信息</text>
				</view>
				<view class="good-info">
					<goods-info :data="refundInfo.good_item"></goods-info>
				</view>
				<view class="item">
					<text class="item-left">交易金额</text>
					<text class="item-right" style="font-weight: 700;">￥{{refundInfo.total}}</text>
				</view>
				<view class="item">
					<text class="item-left">退款金额</text>
					<text class="item-right" style="font-weight: 700;">￥{{refundInfo.refund_price}}</text>
				</view>
				<view class="item" v-if="refundInfo.refund_reason">
					<text class="item-left">店家拒绝退款原因</text>
					<text class="item-right">{{refundInfo.refund_reason}}</text>
				</view>
				<view class="item">
					<text class="item-left">退款原因</text>
					<text class="item-right">{{refundInfo.reason}}</text>
				</view>
				<view class="item" v-if="refundInfo.describes">
					<text class="item-left">具体描述</text>
					<text class="item-right">{{refundInfo.describes}}</text>
				</view>
				<view class="item" v-if="refundInfo.upload_pri.length">
					<text class="item-left">退款凭证</text>
					<view class="item-right">
						<view class="image-box">
							<image :src="item" v-for="item in refundInfo.upload_pri"></image>
						</view>
					</view>
				</view>
				<view class="item">
					<text class="item-left">货物状态</text>
					<text class="item-right">{{refundInfo.pro_states == 1 ? '未收货' : '已收货'}}</text>
				</view>
				<view class="item">
					<text class="item-left">申请时间</text>
					<text class="item-right">{{$u.timeFormat(refundInfo.apply_time, 'yyyy-mm-dd hh:MM:ss')}}</text>
				</view>
				<view class="item" v-if="refundInfo.refund_time">
					<text class="item-left">退款时间</text>
					<text class="item-right">{{$u.timeFormat(refundInfo.refund_time, 'yyyy-mm-dd hh:MM:ss')}}</text>
				</view>
			</view>
		</view>
		<!-- 底部按钮 -->
		<view class="bottom" v-if="refundInfo.apply_status == 0">
			<view class="btn1" style="" @click="operate(refundInfo.id,1)">拒绝退货</view>
			<view class="btn2" @click="operate(refundInfo.id,2)">同意退货</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				refundInfo:{},
				applyStatusList:['待审核','审核成功','审核失败','审核失败','撤销申请','业务处理失败','确认没货了'],
				isVerify:false,            //防止重复提交
			};
		},
		onLoad() {
			uni.$once('detail',(data) => {
				this.refundInfo = data.item
			});
			uni.$emit('need')
		},
		methods:{
			//审核，1拒绝退款，2同意退款
			operate(id,btn){
				if(this.isVerify) return this.$tip.toast('手速太快，悠着点~');
				this.isVerify = true;
				
				let url = btn == 1 ? '/api/auth/order/auditThroughPlus' : '/api/order/pay/agreeRefund';
				this.$http.post(url,id).then(res => {
					setTimeout(() => {
						this.isVerify = false
					},1500);
					this.$tip.successRedirect(res,1500,'../refund-after/refund-after')
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.refund-detail{
	margin-bottom: 111rpx;
	padding: 20rpx 20rpx 0;
	background-color: #fff;
	// 顶部状态
	.status{
		width: 100%;
		height: 150rpx;
		line-height: 150rpx;
		text-align: center;
		font-weight: 700;
		font-size: 20px;
		color: #fff;
		border-radius: 15rpx;
		background-color: #2ba4f7;
	}
	// 商品信息
	.refund-info{
		padding-bottom: 20rpx;
		.info-top{
			margin: 40rpx 0;
			font-weight: 700;
			font-size: 15px;
		}
		.good-info{
			// padding-bottom: 10rpx;
		}
		.item{
			display: flex;
			margin: 14rpx 0;
			line-height: 42rpx;
			.item-left{
				display: inline-block;
				width: 160rpx;
				color: #9e9e9e;
				font-size: 13px;
			}
			.item-right{
				max-width: 520rpx;
				// font-weight: 700;
			}
			.image-box{
				// padding-top: 4rpx;
				image{
					width: 160rpx;
					height: 160rpx;
					margin: 4rpx;
				}
			}
		}
	}
}


// 底部按钮
.bottom{
	position: fixed;
	bottom: 0;
	width: 100%;
	display: flex;
	// justify-content: space-between;
	align-items: center;
	padding:20rpx 50rpx;
	background-color: #fff;
	border-top: 1px solid #e6e6e6;
	.btn1,
	.btn2{
		width: 160rpx;
		height: 70rpx;
		line-height: 70rpx;
		text-align: center;
		font-size: 14px;
		font-weight: 700;
		color:#fff;
		border-radius: 15rpx;
		background-color: #2ba4f7;
	}
	.btn1{
		margin: 0 50rpx 0 280rpx;
		color: #2ba4f7;
		background-color: #f3f3f3;
		border: 1px solid #eaeaea;
	}
}

//图标样式
.icon{
	margin-right: 20rpx;
}
</style>

